#app {
    background : @pageColor;
    height     : 100%;
    width      : 100%;
    display    : flex;
    overflow   : hidden;
}

.left-part {
    @border-color : #383838;
    @ddHeight     : 45px;
    
    .noSelect;
    position      : relative;
    z-index       : 3;
    width         : @ui-left-width;
    background    : @ui-left-bg;
    flex-grow     : 0;
    flex-shrink   : 0;
    
    &:hover {
        .menu-packup {
            opacity : 1;
        }
    }
    
    /*收起状态*/
    
    &.packup {
        width : @ui-left-width-packup;
        
        .logo {
            width    : 60px;
            overflow : hidden;
            
            .normal {
                display : none;
            }
            
            .tips .small {
                display : block;
            }
        }
        
        .menu dd .link span, .version, .bossKey, .setting, .settingBox {
            display : none;
        }
        
        .menu dd .link {
            padding-left : 0;
        }
        
        .menu-packup {
            display : none;
        }
        
        .menu-unpackup {
            display : flex;
        }
        
        & + .right-part .body-part {
            width : calc(~"100vw - @{ui-left-width-packup}");
            
            .body-main {
                width : calc(~"100vw - @{ui-left-width-packup} - @{body-part-padding} * 2");
            }
        }
    }
    
    .logo {
        display         : flex;
        align-items     : flex-start;
        justify-content : flex-start;
        padding-bottom  : 20px;
        flex-direction  : column;
        
        .normal {
            -webkit-app-region : drag;
            display            : block;
            height             : 20px;
            width              : 87px;
            margin-left        : 40px;
        }
        
        .tips {
            display : flex;
            width   : 100%;
            height  : 100%;
            
            .small {
                -webkit-app-region : no-drag;
                cursor             : pointer;
                display            : none;
                height             : 20px;
                width              : 21px;
                margin-left        : 30px;
            }
        }
    }
    
    .menu-packup {
        opacity            : 0;
        -webkit-app-region : no-drag;
        position           : absolute;
        height             : 100%;
        z-index            : 2;
        top                : 0;
        width              : 20px;
        right              : -20px;
        cursor             : pointer;
        display            : flex;
        align-items        : center;
        justify-content    : center;
        
        &:hover {
            i {
                color     : rgba(255, 255, 255, 1);
                font-size : 12px;
            }
        }
        
        .tips {
            display               : flex;
            align-items           : center;
            justify-content       : center;
            position              : absolute;
            margin-top            : -25px;
            height                : 50px;
            width                 : 20px;
            top                   : 50%;
            left                  : 0;
            background            : #1f1f22;
            -webkit-border-radius : 0 3px 3px 0;
            -moz-border-radius    : 0 3px 3px 0;
            border-radius         : 0 3px 3px 0;
        }
        
        i {
            color           : rgba(255, 255, 255, 0.6);
            display         : flex;
            align-items     : center;
            justify-content : center;
            font-size       : 10px;
            width           : 100%;
            height          : 100%;
        }
    }
    
    .menu-unpackup {
        opacity         : 1;
        position        : absolute;
        width           : 100%;
        z-index         : 9;
        bottom          : 0;
        left            : 0;
        display         : none;
        align-items     : center;
        justify-content : center;
        background      : #1f1f22;
        padding         : 18px;
        
        .tips {
            display         : flex;
            align-items     : center;
            justify-content : center;
            width           : 100%;
            height          : 100%;
        }
        
        .btn {
            width                 : 100%;
            height                : @ddHeight;
            -webkit-border-radius : 99px;
            -moz-border-radius    : 99px;
            border-radius         : 99px;
            background            : rgba(255, 255, 255, 0.05);
            display               : flex;
            align-items           : center;
            justify-content       : center;
            cursor                : pointer;
            
            &:hover {
                background : fade(@blue, 20%);
                
                i {
                    color : rgba(255, 255, 255, 1);
                }
            }
        }
        
        i {
            color     : rgba(255, 255, 255, 0.6);
            font-size : 16px;
        }
    }
    
    .drag {
        height             : @drag-height;
        -webkit-app-region : drag;
    }
    
    .menu {
        position        : relative;
        z-index         : 3;
        display         : flex;
        padding         : 0 20px;
        justify-content : center;
        
        dl {
            flex-grow   : 1;
            flex-shrink : 1;
            
            dd {
                display : flex;
                height  : @ddHeight;
                
                &.separator {
                    height        : 1px;
                    line-height   : 1px;
                    overflow      : hidden;
                    background    : fade(#fff, 5%);
                    margin-top    : 10px;
                    margin-bottom : 10px;
                }
                
                .button, .tips {
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                    width           : 100%;
                    height          : 100%;
                }
                
                .link {
                    .animation;
                    display               : flex;
                    align-items           : center;
                    height                : @ddHeight;
                    font-size             : 14px;
                    flex-shrink           : 1;
                    flex-grow             : 1;
                    padding-left          : 5px;
                    margin-bottom         : 5px;
                    -webkit-border-radius : 10px;
                    -moz-border-radius    : 10px;
                    border-radius         : 10px;
                    color                 : #fff;
                    
                    i.appfont {
                        font-size       : 20px;
                        width           : @ddHeight;
                        display         : flex;
                        align-items     : center;
                        justify-content : center;
                        flex-grow       : 0;
                        flex-shrink     : 0;
                    }
                    
                    span {
                        flex-grow   : 1;
                        flex-shrink : 1;
                    }
                    
                    &:hover {
                        color      : #fff;
                        background : #2b2b2f;
                    }
                    
                    &.active {
                        background : fade(@blue, 20%);
                        
                        &:hover {
                            background : fade(@blue, 30%);
                        }
                    }
                }
            }
        }
    }
    
    .bossKey {
        cursor          : pointer;
        display         : flex;
        width           : 100%;
        position        : absolute;
        bottom          : 40px;
        left            : 0px;
        align-items     : center;
        justify-content : center;
        font-size       : 12px;
        color           : rgba(255, 255, 255, 0.5);
        
        span {
            padding               : 0 10px;
            line-height           : 25px;
            background            : #111;
            -webkit-border-radius : 5px;
            -moz-border-radius    : 5px;
            border-radius         : 5px;
        }
    }
    
    .version {
        height                : 30px;
        position              : absolute;
        bottom                : 10px;
        left                  : 10px;
        width                 : calc(~"100% - 20px");
        display               : flex;
        align-items           : center;
        justify-content       : center;
        font-size             : 12px;
        -webkit-border-radius : 5px;
        -moz-border-radius    : 5px;
        border-radius         : 5px;
        color                 : rgba(255, 255, 255, 0.5);
    }
    
    .setting {
        height   : 30px;
        width    : 30px;
        position : absolute;
        right    : 10px;
        bottom   : 10px;
        z-index  : 100;
        cursor   : pointer;
        
        .tips {
            width           : 100%;
            height          : 100%;
            display         : flex;
            align-items     : center;
            justify-content : center;
        }
        
        .icon {
            color : rgba(255, 255, 255, 0.5);
        }
        
        &:hover {
            background            : rgba(255, 255, 255, 0.1);
            -webkit-border-radius : 3px;
            -moz-border-radius    : 3px;
            border-radius         : 3px;
            
            .icon {
                color : #fff;
            }
        }
        
        &.active {
            background            : #111;
            -webkit-border-radius : 0 0 3px 3px;
            -moz-border-radius    : 0 0 3px 3px;
            border-radius         : 0 0 3px 3px;
            
            .icon {
                color : #fff;
            }
        }
    }
    
    .settingBox {
        position              : absolute;
        z-index               : 100;
        background            : #111;
        bottom                : 40px;
        left                  : 10px;
        width                 : calc(~"100% - 20px");
        -webkit-border-radius : 10px 10px 0 10px;
        -moz-border-radius    : 10px 10px 0 10px;
        border-radius         : 10px 10px 0 10px;
        padding               : 15px;
        
        .title {
            text-align  : center;
            font-weight : bold;
            font-size   : 12px;
        }
        
        .btns {
            display         : flex;
            align-items     : center;
            justify-content : center;
            margin-top      : 10px;
            margin-bottom   : 10px;
            
            .btn {
                background      : #333;
                flex            : auto;
                height          : 20px;
                cursor          : pointer;
                display         : flex;
                align-items     : center;
                justify-content : center;
                font-size       : 12px;
                
                &:first-child {
                    -webkit-border-radius : 3px 0 0 3px;
                    -moz-border-radius    : 3px 0 0 3px;
                    border-radius         : 3px 0 0 3px;
                }
                
                &:last-child {
                    -webkit-border-radius : 0 3px 3px 0;
                    -moz-border-radius    : 0 3px 3px 0;
                    border-radius         : 0 3px 3px 0;
                }
                
                &:hover {
                    background : #505050;
                }
                
                &.active {
                    background : @green;
                    
                    &:hover {
                        background : @green;
                    }
                }
            }
        }
        
        .checkUpdate {
            height                : 25px;
            -webkit-border-radius : 3px;
            -moz-border-radius    : 3px;
            border-radius         : 3px;
            font-size             : 12px;
            background            : #333;
            display               : flex;
            align-items           : center;
            justify-content       : center;
            cursor                : pointer;
            
            span {
                flex-grow    : 1;
                flex-shrink  : 1;
                padding-left : 10px;
            }
            
            .icon {
                flex-grow    : 0;
                flex-shrink  : 0;
                flex-shrink  : 0;
                font-size    : 14px;
                margin-right : 8px;
                color        : rgba(255, 255, 255, 0.5);
            }
            
            &.active {
                background : @green-dark;
                
                .icon {
                    color : rgba(255, 255, 255, 1);
                }
            }
        }
        
        .setBossKey {
            width         : 100%;
            margin-top    : 10px;
            margin-bottom : 10px;
            
            input[type=text] {
                -webkit-border-radius : 3px;
                -moz-border-radius    : 3px;
                border-radius         : 3px;
                border                : 0;
                width                 : 100%;
                height                : 20px;
                text-align            : center;
                background            : #fff;
                color                 : #666;
                font-size             : 12px;
            }
        }
    }
}

.right-part {
    background     : @pageColor;
    flex-grow      : 1;
    flex-shrink    : 1;
    display        : flex;
    flex-direction : column;
    position       : relative;
    z-index        : 1;
    
    .controls {
        height             : @drag-height;
        display            : flex;
        justify-content    : flex-end;
        -webkit-app-region : drag;
        cursor             : pointer;
        flex-grow          : 0;
        flex-shrink        : 0;
        
        div {
            width              : 45px;
            display            : flex;
            align-items        : center;
            justify-content    : center;
            font-size          : 12px;
            height             : @drag-height;
            -webkit-app-region : no-drag;
            
            &.minimize:hover, &.maximize:hover, &.resume:hover {
                background : #222226;
            }
            
            &.close:hover {
                background : #e4232d;
            }
        }
    }
    
    .body-part {
        flex-grow   : 0;
        flex-shrink : 0;
        width       : calc(~"100vw - @{ui-left-width}");
        height      : calc(~"100vh - @{drag-height}");
        background  : none;
        overflow    : hidden;
        
        ::-webkit-scrollbar {
            width            : 8px;
            height           : 8px;
            background-color : transparent;
        }
        
        ::-webkit-scrollbar-corner {
            width            : 8px;
            height           : 8px;
            background-color : transparent;
        }
        
        ::-webkit-scrollbar-track {
            -webkit-border-radius : 8px;
            -moz-border-radius    : 8px;
            border-radius         : 8px;
            background-color      : #000;
        }
        
        ::-webkit-scrollbar-thumb {
            -webkit-border-radius : 10px;
            -moz-border-radius    : 10px;
            border-radius         : 10px;
            background-color      : rgba(255, 255, 255, 0.3)
        }
    }
}
